<template>
  <div class="renthome">
    <div class="header">
       <p>
        <i class="iconfont icon-zuo" @click="Return"></i>
      </p>
    </div>
    <div class="renthome-main">
      <div class="nav1">
        <!-- 筛选数据 -->
        <van-dropdown-menu>
          <!-- @change="filerData" -->
          <van-dropdown-item v-model="value1" :options="option1" @change="handleArea" />
          <van-dropdown-item v-model="value2" :options="option2" @change="handlePrice" />
          <van-dropdown-item v-model="value3" :options="option3" @change="handleType" />
          <van-dropdown-item title="更多">
            <ul>
              <li>
                <b>排序</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
              <li>
                <b>特色</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
              <li>
                <b>状态</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
              <li>
                <b>装修</b>
                <van-row type="flex" justify="space-around">
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                  <van-col span="8">span: 8</van-col>
                </van-row>
              </li>
            </ul>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div class="main">
        <!-- 渲染数据 -->
        <dl v-for="(item,index) in list" :key="index" :id="item.id" class="classifyType-item">
          <dt>
            <img :src="item.img" alt @click="godetails(item.id,item.title)" />
          </dt>
          <dd>
            <p>{{item.listingTitle}}</p>
            <p>{{item.detailAddress}}</p>
            <p>{{item.sellingprice}}/套</p>
            <p class="lastp">
              <span>{{item.fitment}}</span>
              <span>{{item.fitmentType}}</span>
              <span>{{item.housetype}}</span>
            </p>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { getoldhome, getarea, getPrice, getType } from "../../../api/index.js";
export default {
  data() {
    return {
      searchData: "",
      list: [],
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [
        { text: "区域", value: 0 },
        { text: "天津市", value: "天津市" },
        { text: "宿迁市", value: "宿迁市" },
        { text: "重庆市", value: "重庆市" },
        { text: "杭州市", value: "杭州市" }
      ],
      option2: [
        { text: "价格", value: 0 },
        { text: "不限", value: "不限" },
        { text: "5千以下", value: "1-5000" },
        { text: "5千~1万", value: "5千~1万" },
        { text: "1万~2万", value: "1万~2万" },
        { text: "2万以上", value: "2万以上" }
      ],
      option3: [
        { text: "类型", value: 0 },
        { text: "中式", value: "中式" },
        { text: "欧式", value: "美式" },
        { text: "北欧", value: "北欧" }
      ],
      arealist: []
    };
  },
  created() {
    this.getoldhome();
  },
  methods: {
    //获取list数据
    getoldhome() {
      getoldhome({ classifyType: 1 }).then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    //筛选区域
    handleArea(value) {
      getarea({ detailAddress: value }).then(res => {
        this.list = res.data.data;
        // console.log(res);
      });
      // console.log(value);
    },
    //筛选价格
    handlePrice(value) {
      getPrice({ sellingprice: value }).then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    //筛选类型
    handleType(value) {
      getType({ fitmentType: value }).then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    goMaphouse() {
      this.$router.push("/maphouse");
    },
    goMaphouse() {
      this.$router.push("/maphouse");
    },
    //返回上一级
    Return() {
      this.$router.push("/main");
    },
    //跳转详情
    godetails(id, title) {
      this.$router.push({ name: "detail", params: { id: id, title: title } });
    }
  },
  computed: {
    newlist() {
      var that = this;
      var newlist = [];
      that.list.map(function(item) {
        if (item.detailAddress.search(that.searchData) != -1) {
          newlist.push(item);
        }
      });
      return newlist;
    }
  }
};
</script>

<style scoped>
.renthome {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
}
.renthome-main{
  flex: 1;
  overflow-y: scroll;
}
.van-icon::before {
  line-height: 40px;
}
.main{
  padding: 0 15px;
}
dl {
  display: flex;
  margin: 20px 0;
}
dl > dt {
  margin-right: 10px;
}
dl > dt > img {
  width: 100px;
  height: 100px;
}
dl > dd > p > span {
  border: 1px solid #ccc;
  margin-right: 20px;
  padding: 2px;
}
</style>